<template>
	<view class="content">
		<view class="block top-block">
			<view @click="recruitType=1" :class="recruitType==1?'active':''" class="top-item">
				<view class="name">全职</view>
			</view>
			<view @click="recruitType=2" :class="recruitType==2?'active':''" class="top-item">兼职</view>
		</view>
		<view class="block tab-block">
			<view :class="tabActive===0?'active':''" @click="tabActive=0" class="tab-item">
				<view class="name">全部</view>
				<view class="border"></view>
			</view>
			<view :class="tabActive===3?'active':''" @click="tabActive =3" class="tab-item">开放中
				<view class="border">
				</view>
			</view>

			<view :class="tabActive===1?'active':''" @click="tabActive=1" class="tab-item">待审核<view class="border">
				</view>
			</view>
			<view :class="tabActive===2?'active':''" @click="tabActive=2" class="tab-item">审核失败
				<view class="border">
				</view>
			</view>
			<view :class="tabActive===4?'active':''" @click="tabActive=4" class="tab-item">已关闭<view class="border">
				</view>
			</view>
		</view>
		<view class="block list-block" v-if="list.length>0">
			<view class="list-item" v-for="(item,index) in list" :key="item.id" @click="goModify(item.id)">
				<view class="title"><text :class="'label-icon color'+item.recruitState"
						v-if="tabActive == 0">{{item.recruitStateText}}</text> {{item.jobTitle}}
					<!-- <text class="iconfont icon-you2"></text> -->
				</view>
				<view class="other" v-if="item.minSalary">{{item.jobAddress}} / {{item.minEducationText}} / {{item.expRequireText}} /
					{{item.minSalary}}-{{item.maxSalary}}元</view>
				<view class="wage" v-else>{{item.jobAddress}} / {{item.minEducationText}} / {{item.expRequireText}}{{list.expRequireText == '无工作经验' ? '' : '年'}} /
					{{item.minSalary}}-面议</view>
			</view>
		</view>
		<!-- 底部加载提示 -->
		<view class='loadingicon' v-if='list.length > 0'>
			<text class='loading iconfont icon-jiazai' :hidden="loading==false"></text>{{loadTitle}}
		</view>
		<view v-if="list.length == 0 && (page != 1 || tabActive == 0 || recruitType == 1)" class="block list-block">
			<view class="empty">暂无数据</view>
		</view>
		<view class="btn-block">
			<view @click="goPublish" class="btn">发布新职位</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyPublish as getMyList,
	} from '@/api/position.js';
	import {
		SplitArray
	} from '@/util/util.js'
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				recruitType: 1, //全职
				tabActive: 0, //全部
				page: 1,
				limit: 10,
				loadend: false,
				loading: false,
				loadTitle: '加载更多',
				exType: -1,
				list: []
			}
		},
		methods: {
			getMyList(refresh = false) {
				if (refresh) {
					this.loadend = false;
					this.page = 1;
					this.limit = 10;
					this.loadTitle = '加载更多';
					this.list = [];
				}
				uni.showLoading({
					title: '正在加载数据',
					mask: true
				})

				if (this.loadend) {
					uni.hideLoading()
					return;
				}
				if (this.loading) return;
				var limit = this.limit;
				var page = this.page;
				this.loading = true;
				this.loadTitle = '';

				getMyList({
					recruitState: this.tabActive,
					page: page,
					limit: limit,
					recruitType: this.recruitType
				}).then((res) => {
					uni.hideLoading()
					let newList = res.list;
					let list = SplitArray(newList, this.list);
					let loadend = newList.length < limit;
					this.list = list;
					this.page = this.page + 1;
					this.loadend = loadend;
					this.loading = false;
					this.loadTitle = loadend ? '已全部加载' : '加载更多';

				}).catch((res) => {
					this.loading = false;
					this.loadTitle = '加载更多';
					uni.hideLoading()
				})
			},

			goPublish() {
				if(this.user.comStatus == 2)
				{
					this.showToast('请先完善企业信息后发布', () => {
						this.$store.dispatch('user/getUser')
						uni.navigateTo({
							url: '/page_other/company/form'
						})
						return;
					});
					
					return;
				}
				uni.navigateTo({
					url: '/page_other/position/release_position'
				})
			},
			goModify(id) {
				uni.navigateTo({
					url: '/page_other/position/release_position?id=' + id
				})
			},
		},
		computed: {
			...mapGetters(['identity', 'user'])
		},
		watch: { //监听
			tabActive: {
				handler() {
					this.getMyList(true);
				},
				//immediate:true,//深度监听
			},
			exType: {
				handler() {
					this.getMyList(true)
				}
			},
			recruitType: {
				handler(val) {
					this.getMyList(true)
				}
			}
		},
		onLoad(e) {
			this.getMyList();
		},

		/**
		 * 监听用户下拉动作
		 */
		onPullDownRefresh() {
			this.list = [];
			this.page = 1;
			this.loadend = false;
			this.getMyList();
			uni.stopPullDownRefresh();
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			this.getMyList();
		},

	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		padding-bottom: 110rpx;

		.loadingicon {
			width: 100%;
			height: 80rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
		}

		.loading {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			align-items: center;
			justify-content: center;
			position: relative;
			text-align: center;
		}

		.loading .line {
			position: absolute;
			width: 450rpx;
			left: 150rpx;
			top: 50rpx;
			height: 1px;
			border-top: 1px solid #eee;
		}

		.loading .text {
			position: relative;
			display: inline-block;
			padding: 0 20rpx;
			background: #fff;
			z-index: 2;
			color: #777;
		}

		.loadingicon .loading {
			animation: load linear 1s infinite;
			font-size: 45rpx;
			color: #000;
		}

		.loadingicon {
			width: 100%;
			height: 80rpx;
		}

		.block {
			width: 100%;
		}

		.top-block {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 300rpx;
			height: 60rpx;
			//border:1px solid #999;
			border-radius: 16rpx;
			margin: 30rpx auto 0 auto;
			box-shadow: 5rpx 5rpx 10rpx #999;
			background-color: #eee;
			padding: 6rpx;

			.top-item {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50%;
				height: 100%;
				font-size: 28rpx;
				border-radius: 16rpx;
			}

			.top-item.active {
				font-weight: bold;
				background-color: #fff;
				height: 100%;

			}
		}

		.tab-block {
			display: flex;
			flex-direction: row;
			align-items: center;

			.tab-item {
				position: relative;
				flex-grow: 1;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;

				.border {
					position: absolute;
					transform: translate(-50%, -50%);
					left: 50%;
					bottom: 0;
					width: 30rpx;
					height: 6rpx;
					background: #fff;
					border-radius: 20rpx;
				}
			}

			.tab-item.active {
				font-weight: bold;

				.border {
					background: #FF7626;
				}
			}
		}

		.list-block {
			width: 100%;
			display: flex;
			flex-direction: column;

			.list-item {
				margin: 0 30rpx;
				padding: 40rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				border-bottom: 1px solid #efefef;

				.title {
					width: 100%;
					font-size: 32rpx;
					font-weight: bold;

					.iconfont {
						margin-left: 15rpx;
						font-size: 30rpx;
						color: #FF7626;
					}

					.label-icon {
						margin-right: 15rpx;
						font-size: 26rpx;
						color: #FF7626;
						border: 1px solid #ff7626;
						border-radius: 16rpx;
						padding: 5rpx 10rpx;
					}

					.color1 {
						color: seagreen;
						border: 1px solid seagreen;
					}

					.color2 {
						color: steelblue;
						border: 1px solid steelblue;
					}

					.color3 {
						color: red;
						border: 1px solid red;
					}

					.color4 {
						color: #FF7626;
						border: 1px solid #ff7626;
					}
				}

				.other {
					font-size: 28rpx;
					color: #999;
					margin-top: 20rpx;
				}
			}
		}

		.btn-block {
			position: fixed;
			width: 100%;
			bottom: 0;
			left: 0;
			background: #fff;
			height: 110rpx;
			box-shadow: 0px -5px 10px #efefef;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.btn {
				color: #FF7626;
				border: 1px solid #FF7626;
				border-radius: 40rpx;
				padding: 10rpx 40rpx;
				font-size: 28rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>
